<template>

  <div class="editperson">
    <h4>添加人员</h4>
   <form @submit.prevent="editform()" >
        <table align="center" class="table1" border="1" cellpadding="0" cellspacing="0" borderColor="grey"> 
            
  <tbody>
            <tr>
                <td align="center" width="100" height="50">姓名</td>
             
                <td width="100" height="50"><input type="text" name="" id="" placeholder="请输入姓名" v-model.lazy.trim="objF.na" required></td>
            </tr>
            <tr>
                <td align="center" width="100" height="50">性别</td>
                <td width="100" height="50">
                <input class="i1" type="radio" v-model="objF.xb" value="0"/><span>女</span>
                <input class="i2" type="radio" v-model="objF.xb" value="1"/><span>男</span>
                </td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">年龄</td>
                <td width="100" height="50"><input type="number" min="18" max="70" placeholder="请输入年龄" v-model.lazy.trim="objF.nl" required></td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">职务</td>
                <td width="100" height="50">
                    <!-- 将v-mode所获得的value值转换为数字类型数据 -->
                    <select v-model.number="objF.port" required>
                        <option value="" disabled>--请选择职务--</option>
                        <option value="1">老板</option>
                        <option value="2">总经理</option>
                        <option value="3">部门主管</option>
                        <option value="4">组长</option>
                        <option value="5">员工</option>

                    </select>
                </td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">薪资</td>
                <td width="100" height="50"><input type="number" min="2500" placeholder="请输入薪资"  v-model.lazy.trim="objF.xz" required></td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">入职时间</td>
                <td width="100" height="50"><input type="date" name="" id="" placeholder="请输入入职时间****-**-**" v-model="objF.ti" required></td>
            </tr>
    </tbody>

    <tfoot align="center">
        <th colspan="2">
            <button class="b6" >修改数据</button>
        </th>
      
    </tfoot>
      </table>
      </form>
  

  </div>
</template>

<script>
import{mapMutations, mapState} from 'vuex';
import data from "../assets/JS/data.js";

export default {
name:"EditPerson",
 data(){
    return{
        ind :'',
   objF:{
    na:'',
    xb:0,
    nl:18,
    port:'',
    xz:2500,
    ti:'',
    },
   data,
    }
 },
    computed:{
    ...mapState(['plist'])
 },
    //生命周期函数
    mounted(){
        this.ind = this.$route.query.i;
        let obj = this.plist[this.ind];

        this.objF ={
            na:obj.na,
            xb:obj.xb,
            nl:obj.nl,
            port:obj.port,
            xz:obj.xz,
            ti:obj.ti,
        }
    },
    methods:{
    ...mapMutations(['editlist']),
   //提交表单事件
   editform(){
    let nowtime=new Date().getTime();
    let Ctime =new Date(this.objF.ti).getTime();
    if(Ctime>nowtime){
        alert('入职时间不得高于当前系统时间')
        return
    }
    this.editlist({val:this.objF,id:this.ind})
    alert('修改成功')
   }
   
 }
 
}
</script>

<style scoped>
.editperson input,select{
    width: 200px;
    height: 35px;
    border: none;
    outline: none;
    background-color: pink;
}
.editperson .i1{
       width: 25px;
    height: 20px;
    border: none;
    outline: none;
    background-color: pink;
}
.editperson .i2{
       width: 25px;
    height: 20px;
    border: none;
    outline: none;
    background-color: pink;
}
.editperson button{
    width: 100%;
    height: 35px;
    background-color: rgb(124, 233, 233);
    border-radius: 5px;
    border: none;
}
</style>